<template>
  <div class="exchange_course">
    <nav-bar class="nav-bar-position"> 兑换课程</nav-bar>
    <white-space/>

    <div class="title">请输入兑换码</div>

    <label>
      <input
        type="number"
        :maxlength="digits.length"
        autofocus
        focus
        class="input"
        v-model="code"/>
    </label>
    <ul @tap="focus" class="pwd-wrap">
      <li :key="key"
          v-for="(item,key) in digits">
        <span>{{code.length === key? star:code.substring(key,key+1)}}</span>
      </li>
    </ul>

    <my-button @tap="reqExchangeCourse({code})" margin-top="40">立即兑换</my-button>

  </div>
</template>

<script>
  import { mapActions } from 'vuex'

  export default {
    name: "exchange_course",
    data() {
      return {
        digits: ['', '', '', '', '', ''],  //input框位数控制,这里可以配置多少个“输入框”
        code: '',
        star: '',
      }
    },
    onShow() {
      setInterval(() => {
        this.star = this.star === '|' ? '' : '|'
      },500)
    },
    methods: mapActions('User', ['reqExchangeCourse'])
  }
</script>

<style lang="scss" scoped>
  @import "../../uni";

  .exchange_course {
    @include bg;

    .title {
      padding: upx(112) 0 upx(68);
      text-align: center;
      @include ft(48, #5D6473, 500)
    }

    .input {
      position: fixed;
      width: 120vw;
      height: upx(400);
      top: upx(120);
      left: -20vw;
      opacity: 0;
    }

    .pwd-wrap {
      display: flex;
      padding: upx(0) upx(80);
    }

    .pwd-wrap li {
      margin: 0 auto;
      flex-shrink: 0;
      text-align: center;
      line-height: upx(78);
      width: upx(78);
      height: upx(78);
      background: rgba(255, 255, 255, 1);
      box-shadow: 0 upx(12) upx(28) 0 rgba(0, 0, 0, 0.1);
      border-radius: upx(8);
      @include ft(36, #5D6473, 500)
    }

  }
</style>
